import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Bar } from '@ant-design/plots';

const DemoBar = (prop: any) => {
  const data = [
    {
      year: '领导调研',
      value: 38,
    },
    {
      year: '开放共享',
      value: 52,
    },
    {
      year: '开放课题',
      value: 61,
    },
    {
      year: '主办承办会议',
      value: 145,
    },
    {
      year: '报告',
      value: 48,
    },
  ];
  const config = {
    data: prop.data || [],
    xField: 'count',
    yField: 'name',
    legend: {
      position: 'top-left',
    },
    tooltip: {
      showTitle: false,
      formatter: (datum: any) => {
        return {
          name: datum['name'],
          value: datum['count'],
        };
      },
    },
  };
  return <Bar {...config} />;
};

export default DemoBar;
